import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { withStyles } from 'material-ui/styles'
import { inject, observer } from 'mobx-react'
import marked from 'marked'
import style from './style/message'
import UserStore from '../../stores/user_store'

@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class Message extends React.Component {
  constructor() {
    super()
    this.state = {

    }
    this.signOne = this.signOne.bind(this)
    this.signAll = this.signAll.bind(this)
  }
  componentDidMount() {
    this.getMessage()
  }
  getMessage() {
    const { user } = this.props
    user.getMessage()
  }
  signOne(messageId) {
    this.props.user.signOne(messageId)
  }
  signAll() {
    this.props.user.signAll()
  }
  render() {
    const { classes, user } = this.props
    const { message } = user
    return (
      <div>
        { message && message.length ?
          <div>
            <div className={classes.signAll} onClick={this.signAll}>
              全部标记为已读
            </div>
            {
              message.map(item => (
                <div className={classes.message} key={item.id}>
                  <div className={classes.header}>
                    <div className={classes.title}>
                      <Link className={classes.link} to={`/topic-detail/${item.topic.id}`}>
                        {item.topic.title}
                      </Link>
                    </div>
                    <span className={classes.sign} onClick={() => this.signOne(item.id)}>
                      标记为已读
                    </span>
                  </div>
                  <div className={classes.replyContainer}>
                    <div
                      className={classes.content}
                      dangerouslySetInnerHTML={{ __html: marked(item.reply.content) }}
                    />
                  </div>
                </div>
              ))
            }
          </div>
            :
          null
        }
      </div>
    )
  }
}
export default withStyles(style)(Message)
Message.propTypes = {
  classes: PropTypes.objectOf(Object),
  user: PropTypes.instanceOf(UserStore),
}
